<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="val"
          placeholder="输入卡号"
          style="width:400px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="columnA" label="渠道编号"> </el-table-column>
      <el-table-column prop="columnB" label="营业额（万）"> </el-table-column>
      <el-table-column prop="columnC" label="渠道级别"> </el-table-column>
      <el-table-column prop="columnD" label="省份"> </el-table-column>
      <el-table-column prop="columnE" label="加入时间"> </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination />
    </div>
  </div>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      val: '',
      tableData: [
        {
          columnA: 'D39212',
          columnB: '200',
          columnC: '普通',
          columnD: '北京',
          columnE: '2016'
        },
        {
          columnA: 'D32121',
          columnB: '300',
          columnC: '银牌',
          columnD: '北京',
          columnE: '2019'
        },
        {
          columnA: 'D38512',
          columnB: '500',
          columnC: '银牌',
          columnD: '北京',
          columnE: '2019'
        },
        {
          columnA: 'D44321',
          columnB: '100',
          columnC: '普通',
          columnD: '北京',
          columnE: '2018'
        },
        {
          columnA: 'D31782',
          columnB: '1000',
          columnC: '金牌',
          columnD: '北京',
          columnE: '2017'
        }
      ]
    }
  },

  methods: {
    handleSearch() {
      if (!this.val) {
        this.$message({
          message: '查询内容不能为空',
          type: 'warning'
        })
        return
      }
      this.tableData = [
        {
          columnA: this.val,
          columnB: '100',
          columnC: '普通',
          columnD: '北京',
          columnE: '2017'
        }
      ]
      this.$message({
        message: '查询成功',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin: 10px;
}
</style>
